<template>
  <div class="page-content">
    <div class="condition">
      <div class="condition-content">
        <Form ref="queryForm" label-position="right" :model="queryForm" inline>
          <Row>
            <Col span="6">
              <FormItem label="是否是菜单：" prop="isMenu" :labelWidth="100">
                <Select v-model="queryForm.isMenu">
                  <Option value="false" label="否"></Option>
                  <Option value="true" label="是"></Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="权限名：" prop="name" :labelWidth="80">
                <Input type="text" v-model="queryForm.name" placeholder="权限名" />
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem>
                <Button type="primary" @click="query('queryForm')">查询</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
    <div class="content">
      <Table
        border
        stripe
        :columns="columns"
        :data="data"
        height="480"
        highlightRow
        @on-row-click="rowClick"
      >
        <template slot="footer">
          <Page
            show-total
            :total="total"
            @on-change="pageChange"
            show-sizer
            :pageSizeOpts="[5,10,15,20]"
            @on-page-size-change="pageSizeChange"
          ></Page>
        </template>
      </Table>
    </div>
  </div>
</template>
<script>
import { queryRightApi } from '@/api/rights'
export default {
  name: 'query-right',
  data() {
    return {
      queryForm: {
        isMenu: '',
        name: '',
      },
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      columns: [
        {
          title: '权限名',
          key: 'name',
        },
        {
          title: '菜单',
          key: 'isMenu',
          render: (h, params) => {
            let text = ''
            if (params.row.isMenu == 1) {
              text = '是'
            } else {
              text = '否'
            }
            return h('span', text)
          },
        },
        {
          title: '备注',
          key: 'description',
        },
      ],
      data: [], //用户数据
      total: 0,
      tblCurIndex: undefined, //选中角标
      tblCurData: {}, //选中数据
    }
  },
  props: {
    roleId: {
      type: [String, Number],
      default: '',
    },
    systemId: {
      type: [Number, String],
      default: '',
    },
  },
  methods: {
    query(name) {
      let condition = this.$refs[name].model
      condition.roleId = this.roleId
      condition.systemId = this.systemId
      var param = {}
      param.condition = condition
      param.page = this.page
      queryRightApi(param)
        .then((response) => {
          this.data = response.data
          this.total = response.page.total
        })
        .catch((error) => {
          console.log(error)
        })
    },
    pageChange(pageNum) {
      this.page.pageNum = pageNum
      this.query('queryForm')
    },
    pageSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.query('queryForm')
    },
    rowClick(data, index) {
      this.$emit('select', data)
    },
  },
  created: function () {},
  watch: {},
}
</script>
<style lang="less" scoped>
.page-content > .condition {
  border: 1px solid #b8c7cb;
}

.page-content > .condition > .condition-content {
  margin-top: 10px;
}

.page-content > .operation {
  margin-top: 15px;
  background-color: rgba(113, 182, 114, 0.1);
}
</style>